<template>
    <div class="nav-container">
        <el-menu
                router
                :default-active="activeIndex"
                class="nav-menu"
                mode="horizontal"
                @select="handleSelect"
                :ellipsis="false"
        >
            <!-- Logo区域 -->
            <div class="logo-area" @click="navigateTo('/')">
                <img class="logo-img" src="../assets/logo.png" alt="Logo" />
                <h1 class="site-name">图书管理系统</h1>
            </div>

            <!-- 右侧空白填充 -->
            <div class="flex-grow"></div>

            <!-- 用户相关 -->
            <div class="user-area">
                <el-dropdown class="user-dropdown">
                    <div class="user-profile">
                        <el-avatar :size="36" :src="user.avatar" class="user-avatar"></el-avatar>
                        <span class="user-name">{{ user.name }}</span>
                        <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="navigateTo('/userprofile')">
                                <el-icon><User /></el-icon>
                                <span>个人中心</span>
                            </el-dropdown-item>
                          <el-dropdown-item @click="navigateTo('/MianLayout')">
                            <el-icon><User /></el-icon>
                            <span>管理中心</span>
                          </el-dropdown-item>
                            <el-dropdown-item divided @click="showLogoutDialog">
                                <el-icon><SwitchButton /></el-icon>
                                <span>退出登录</span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </el-menu>

        <!-- 退出确认对话框 -->
        <el-dialog
                v-model="centerDialogVisible"
                title="确认退出"
                width="400"
                align-center
        >
            <span>确定要退出登录吗？</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancelLogout">取消</el-button>
                    <el-button type="primary" @click="confirmLogout">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowDown, User, SwitchButton } from '@element-plus/icons-vue'

const router = useRouter()
const centerDialogVisible = ref(false)
const activeIndex = ref('/')

const user = ref({
    name: '管理员',
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
})

// 导航到指定路径
const navigateTo = (path) => {
    router.push(path)
}

// 显示退出对话框
const showLogoutDialog = () => {
    centerDialogVisible.value = true
}

// 取消退出
const cancelLogout = () => {
    centerDialogVisible.value = false
}

// 确认退出
const confirmLogout = () => {
    centerDialogVisible.value = false
    // 这里添加实际的退出逻辑
    console.log('用户已退出')
    // navigateTo('/login')
}

const handleSelect = (index) => {
    activeIndex.value = index
}
</script>

<style scoped>
.nav-container {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-menu {
    display: flex;
    align-items: center;
    height: 64px;
    padding: 0 24px;
    background: transparent !important;
    border-bottom: none !important;
}

.logo-area {
    display: flex;
    align-items: center;
    margin-right: 40px;
    cursor: pointer;
}

.logo-img {
    height: 36px;
    margin-right: 12px;
}

.site-name {
    font-size: 20px;
    font-weight: 600;
    color: white;
    margin: 0;
    white-space: nowrap;
}

.flex-grow {
    flex-grow: 1;
}

.user-area {
    display: flex;
    align-items: center;
}

.user-dropdown {
    cursor: pointer;
}

.user-profile {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    transition: all 0.3s;
}

.user-profile:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.user-avatar {
    margin-right: 8px;
}

.user-name {
    color: white;
    font-size: 14px;
    margin-right: 6px;
}

.dropdown-icon {
    color: white;
    font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 992px) {
    .nav-menu {
        padding: 0 16px;
    }

    .logo-area {
        margin-right: 20px;
    }

    .site-name {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .site-name {
        display: none;
    }

    .user-name {
        display: none;
    }
}
</style>